<template>
  <div class="common-layout">
    <div class="loginDiv">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="loginForm" :label-position="'right'" label-width="20%">
        <el-header class="el-header">
          <div>
            <h3>RBAC管理系统</h3>
          </div>
        </el-header>
        <el-form-item  prop="username" label="用户名">
          <el-input placeholder="请输入用户名" autocomplete="on" v-model="ruleForm.username" clearable size="large">
            <template #prefix>
              <el-icon class="el-input_icon"><UserFilled/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="ruleForm.password" :type="passwordType" placeholder="请输入密码" autocomplete="on"  size="large">
            <template #prefix>
              <el-icon class="el-input_icon">
                <GoodsFilled></GoodsFilled>
              </el-icon>
            </template>
            <template #suffix>
              <div class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password'?'eye':'eye-open'"></svg-icon>
              </div>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: center;
									width:100%;margin-top: 20px;margin-bottom: 20px;">
        <el-button :loading="loading"
                   class="login-btn" type="primary" @click="submitForm(ruleFormRef)"
        >
          登&nbsp;&nbsp;陆
        </el-button>
      </div>
    </div>
	</div>
</template>

<script lang="ts" setup>
	import { ElMessage,ElNotification } from 'element-plus';
	import type { FormInstance } from 'element-plus'; 
	import {ref,reactive} from 'vue'
	import logo from '@/assets/logo.png';
	import background from '@/assets/background.jpg';
	import {useUserStore} from '@/stores/user.ts'
	import {useRouteStore} from '@/stores/route.ts'
  import {login, loginInfo} from '@/api/user';
	
	const userStore = useUserStore();
	const useRoute = useRouteStore();
	const router=useRoute.router;
	const ruleFormRef = ref<FormInstance>()
	const passwordType = ref('password')
	const loading = ref(false)
	const rules = reactive({
		password:[{required:true,message:'请输入密码',trigger:'blur'}],
		username:[{required:true,message:'请输入用户名',trigger:'blur'}],
	})
	const ruleForm = reactive({
		username:'test',
		password:'test'
	})
	const showPwd=()=>{
		passwordType.value = passwordType.value === 'password'?'':'password'
	}
	const submitForm = (formEl:FormInstance|undefined)=>{
		if(!formEl){
			return
		}
		formEl.validate(async (valid: any)=>{
			if(valid){
				loading.value = true;
				const {data,code} = await login({...ruleForm})
				if(code === 200){
					userStore.setToken(data.result,data.expiredTime)
					userStore.setMenus().then(()=>{
						console.log("结果2："+userStore.menues)
					})
          userStore.getDictionary()
          getLoginUserIfo()
					await router.push({
						  path: '/index',
					})
					ElMessage({
						message:'欢迎登录，RBAC管理系统',
						type:'success',
						duration:3000
					})
				}else{
					ElMessage.error("用户名或密码错误")
				}
				loading.value = false
			}else{
				loading.value = false
				return false
			}
		})
	}
  const getLoginUserIfo=()=>{
    loginInfo().then((res)=>{
      if(res.code === 200){
        userStore.setUserInfo(res.data)
      }
    })
  }
</script>

<style scoped>
	.common-layout{
		background-image: url("@/assets/back3.jpg");
    background-size: cover;
    background-position: center; /* 可选，确保图像居中 */
		height:97.8vh;
    display: flex;
    justify-content: center;
    align-items: center;
	}
	.show-pwd{
		position: absolute;
		right: 10px;
		top:7px;
		font-size: 16px;
		cursor: pointer;
		user-select: none;
	}
	::v-deep(.svg-icon){
		vertical-align: 0;
	}
	::v-deep(.el-input_inner){
		height: 40px;
	}
	.loginForm{
		width:60%;
    height: 60%;
	}
  .el-header{
    font-weight: 800;
    text-align: center;
  }
	.loginDiv{
    //background-image: url("@/assets/back2.jpg");
    //background-size: cover;
    //background-position: center; /* 可选，确保图像居中 */
		display: flex;
    flex-direction: column;
		justify-content: center;
		align-items: center;
		height:40%;
    width: 40%;
    background-color: pink;
    border-radius: 15px;
	}
</style>